    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>DataGrid with Toolbar - jQuery EasyUI Demo</title>
        <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    </head>
		<body>
			<h2>Custom DataGrid Pager</h2>
			<p>You can append some buttons to the standard datagrid pager bar.</p>
			<div style="margin:20px 0;"></div>
			<table id="dg" title="Custom DataGrid Pager" style="width:700px;height:250px"
					data-options="rownumbers:true,singleSelect:true,pagination:true,url:'datagrid_data1.json',method:'get'">
				<thead>
					<tr>
						<th data-options="field:'itemid',width:80">Item ID</th>
						<th data-options="field:'productid',width:100">Product</th>
						<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
						<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
						<th data-options="field:'attr1',width:240">Attribute</th>
						<th data-options="field:'status',width:60,align:'center'">Status</th>
					</tr>
				</thead>
			</table>
			<script type="text/javascript">
				$(function(){
					var s = [{
							iconCls:'icon-search',
							handler:function(){
								alert('search');
							}
						},{
							iconCls:'icon-add',
							handler:function(){
								alert('add');
							}
						},{
							iconCls:'icon-edit',
							handler:function(){
								alert('edit');
							}
						}];

                    var s1 = {
							iconCls:'icon-edit',
							handler:function(){
								alert('edit');
							}
						};

						s.push(s1);
					var pager = $('#dg').datagrid().datagrid('getPager');    // get the pager of datagrid
					pager.pagination({
						buttons:s
					});            
				})
			</script>
		</body>
    </html>